<template>
  <div class="g-content-index" :style="{'height':streetInHeight+ 'px'}">
    <alarm-map dept-id="302"></alarm-map>
    <!-- 左侧浮层 -->
    <div class="float-left">
      <communityStatu />
      <peopleFlow class="mt10" />
      <dustRank :dept-id="12" class="mt10" />
      <well-manage class="mt10" />
    </div>
    <!-- 中间浮层 -->
    <div class="middle">
      <carEntry class="H100" :inCount="this.summaryDetail.carInCount" :outCount="this.summaryDetail.carOutCount" :carList="this.summaryDetail.deptSummaryCarEntryBeanList" />
      <villageMonitor class="H100" />
    </div>
    <!-- 右侧浮层 -->
    <div class="float-right">
      <alarmTotal />
      <alarmTrend class="mt10" />
      <fireSafety class="mt10" />
      <cellPaiming class="mt10" />
      <monthWarnTrend class="mt10" />
    </div>
  </div>
</template>

<script>
// import Alarm from '../components/common/event/alarm.vue'
import AlarmMap from '../../components/village/alarmMap'
import alarmTotal from '../../components/street/alarmTotal'
import alarmTrend from '../../components/street/alarmTrend'
import fireSafety from '../../components/street/fireSafety'
import cellPaiming from '../../components/street/cellPaiming'
import monthWarnTrend from '../../components/common/table/monthWarnTrend'
import communityStatu from '../../components/common/table/communityStatu'
import peoplePass from '../../components/common/table/peoplePass'
import peopleFlow from '../../components/common/table/peopleFlow'
import wellManage from '../../components/common/table/wellManage'
import dustRank from '../../components/village/dustRank'
import carEntry from '../../components/village/carEntry'
import villageMonitor from '../../components/village/villageMonitor'

export default {
  name: 'index',
  data () {
    return {
      streetInHeight: 0,
      summaryDetail: {}
    }
  },
  components: {
    AlarmMap,
    alarmTotal, // 报警总数
    alarmTrend, // 报警趋势
    fireSafety, // 消防安全
    cellPaiming, // 近三十天小区高发排名
    monthWarnTrend, // 本月报警趋势
    communityStatu, // 机动车停车管理
    peoplePass, // 人员出入
    peopleFlow, // 重点区域人流量
    wellManage, // 窨井管理
    carEntry, // carEntry
    dustRank, // 垃圾桶溢满度排名
    villageMonitor // 社区监控
  },
  created () {
    this.$store.commit('changeSystemShow', false)
  },
  mounted () {
    this.streetInHeight = this.$base.getDocumentHeight()
    this.getTree()
  },
  methods: {
    // 获取全部小区
    getTree () {
      let url = this.$base.getUrl('getTree')
      let params = {
        url: url,
        data: {}
      }
      this.$store.dispatch('getForm', params).then(res => {
        const [nodes] = res.nodes
        const deptId = nodes['nodes'][0]['deptId']
        this.getMainData(deptId)
      })
    },
    getMainData (deptId) {
      let url = this.$base.getUrl('summaryByDeptId')
      let params = {
        // isJson: true,
        url: url,
        data: {
          deptId
        }
      }

      this.$store.dispatch('postForm', params).then((res) => {
        this.summaryDetail = res.result
      })
    }
  }
}
</script>

<style scoped>
.g-content-index {
  width: 100%;
  height: 100%;
  position: relative;
}
.float-left {
  position: absolute;
  left: 10px;
  top: 50px;
  bottom: 10px;
  width: 320px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.float-right {
  position: absolute;
  right: 10px;
  top: 50px;
  bottom: 10px;
  width: 270px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.middle {
  display: flex;
  position: absolute;
  left: 340px;
  right: 290px;
  bottom: 10px;
}
.mt10 {
  margin-top: 10px;
}

.H100 {
  height: 300px;
}
</style>
